<script lang="ts" setup>
import {computed, onMounted} from "vue";
import {store} from "@/store";
import {Tool} from "@/util/tool";
import {notification} from "ant-design-vue";

const user=computed(()=>store.state.user);
let websocket: any;
let token: any;
const onOpen = () => {
  console.log('WebSocket连接成功，状态码：', websocket.readyState)
};

const onMessage = (event: any) => {
  notification['info']({
    message: '收到消息',
    description: event.data,
  })
};

const onError = () => {
  console.log('WebSocket连接错误，状态码：', websocket.readyState)
};

const onClose = () => {
  console.log('WebSocket连接关闭，状态码：', websocket.readyState)
};

const initWebSocket = () => {
  // 连接成功
  websocket.onopen = onOpen;
  // 收到消息的回调
  websocket.onmessage = onMessage;
  // 连接错误
  websocket.onerror = onError;
  // 连接关闭的回调
  websocket.onclose = onClose;
};

onMounted(() => {
  // WebSocket
  if ('WebSocket' in window) {
    token = Tool.uuid(10);
    websocket = new WebSocket("ws://127.0.0.1:8888"+ '/ws/' + token);
    initWebSocket()

    // 关闭
    // websocket.close();
  } else {
    alert('当前浏览器 不支持')
  }
});
</script>

<template>
  <div class="the-footer">
    <a-layout-footer style="text-align: center">
      MyKBS知识库系统version1.1<span v-show="user.id">,欢迎{{user.name}}</span>
    </a-layout-footer>
  </div>
</template>

<style lang="less" scoped>
.the-footer {

}
</style>